<template>
    <div id="login">
        <van-icon name="cross" class="close" size="0.7rem" v-tap="{methods:fanhui}"/>
         <img src="../assets/zaozauologo.png" id="logo" alt="">
         <div class="login_method">
                 <p v-tap="{methods:phone}" :class="line" >快捷登录</p>
                 <p v-tap="{methods:mima}" :class="line2" >密码登录</p>
         </div>
        <Mima  v-show='!flag' ></Mima>
        <Phone  v-show='flag' ></Phone>
        <p class="zhuce"><router-link to="/register" tag="a">新用户注册</router-link> ><a href="">微信登录</a></p>
    </div>
</template>

<script>

import Mima from '../components/loginbypassword';
import Phone from '../components/loginbyphone'
    export default {
        name:'login',
        data() {
            return {
                flag:false,
                line:'',
                line2:'line',
            }
        },
        methods: {
            phone(){
                this.flag=true,
                this.line='line',
                this.line2=''
            },
            mima(){
                this.flag=false,
                this.line='',
                this.line2='line'
            },
            fanhui(){
                this.$router.push("/");
            }

        },
        components:{
            Mima:Mima,//账号登录
            Phone:Phone,//手机号登录
        },
        
        
    }
</script>

<style  scoped>
    #login{
        height: 100vh;
        overflow:hidden;
        position: relative;
    }
    .close{
        margin-top: 69px;
        display: block;
        width: 86px;
    }
    #logo{
        margin-top:64px ;
        width: 425px
    }
     .login_method{
        margin-top: 140px;
        height: 53px;
        margin-bottom: 40px;
    }
   .login_method p{
        font-size: 27px;
        float: left;
        height:53px;
        line-height: 53px;
        box-sizing: border-box;
        margin: 0;
        margin-left: 86px;
    }
     .login_method p:nth-of-type(2){
         color: black;
     }
    .zhuce{
        position: fixed;
        left:225px;
        bottom:88px;
        color: #cccccc;
    }
    .zhuce a{
        font-size: 28px;
        color: #cccccc;
    }
    .line{
        border-bottom:6px solid black;
    }
    .phone{
        position: absolute;
        left: 86px;
        top: 430px;
    }
</style>